import { memo, useCallback } from "react"
import styled from "@emotion/styled"
import { useNavigate } from "react-router-dom"
import { SvgComponent } from "@/components/base/Svg"
import { resolveAssetImage } from "@/utils/common"

// 优化类型定义
type IconType = "white-arrow" | "black-arrow" | "square-close"

interface PageHeaderProps {
    sticky?: boolean
    title?: string
    onBack?: () => void
    backgroundColor?: string
    backPath?: string
    textColor?: string
    iconType?: IconType
    onAdd?: () => void
    hideAddButton?: boolean
}

// 图标映射
const iconMap = {
    "white-arrow": resolveAssetImage("pages/AccountPage/white_arrow.webp"),
    "black-arrow": resolveAssetImage("pages/AccountPage/black_arrow.webp"),
    "square-close": resolveAssetImage("pages/AccountPage/square_close.webp"),
}

// 优化样式组件
const HeaderRoot = styled.div`
    width: 100%;
    height: 44rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12rem;
    color: white;
    z-index: 99;

    &.sticky {
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
    }
`

const BackButton = styled.div`
    width: 28rem;
    height: 28rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    &:active {
        opacity: 0.8;
    }
`

const BackImage = styled.img`
    width: 28rem;
    height: 28rem;
`

const Title = styled.h1<{ textColor?: string }>`
    margin: 0;
    font-size: 18rem;
    flex: 1;
    text-align: center;
    padding-right: 28rem;
    color: ${(props) => props.textColor || "#F9F9FA"};
    line-height: 28rem;
    font-weight: 500;
    font-family: "Gilroy";
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
`

const AddButton = styled.div`
    width: 28rem;
    height: 28rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    &:active {
        opacity: 0.8;
    }

    &.hidden {
        visibility: hidden;
    }
`

const AddImage = styled(SvgComponent("pages/WithdrawAccounts/add.svg"))`
    width: 28rem;
    height: 28rem;
`

export const PageHeader = memo(
    ({
        sticky = false,
        title,
        onBack,
        backPath,
        textColor,
        iconType = "white-arrow",
        onAdd,
        hideAddButton = false,
    }: PageHeaderProps) => {
        const navigate = useNavigate()

        // 使用 useCallback 优化事件处理函数
        const handleBack = useCallback(() => {
            if (onBack) {
                onBack()
            } else if (backPath) {
                navigate(backPath)
            } else {
                navigate(-1)
            }
        }, [onBack, backPath, navigate])

        const handleAdd = useCallback(() => {
            if (onAdd) {
                onAdd()
            }
        }, [onAdd])

        return (
            <HeaderRoot className={sticky ? "sticky" : ""}>
                <BackButton onClick={handleBack}>
                    <BackImage src={iconMap[iconType]} />
                </BackButton>

                <Title textColor={textColor}>{title}</Title>

                <AddButton
                    onClick={handleAdd}
                    className={hideAddButton || !onAdd ? "hidden" : ""}
                >
                    <AddImage />
                </AddButton>
            </HeaderRoot>
        )
    },
)

// 添加显示名称，便于调试
PageHeader.displayName = "PageHeader"
